<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="shortcut icon" href="../../share/img/logo.png">
		<link rel="stylesheet" href="../../share/js/bs/bootstrap.min.css">
		<link rel="stylesheet" href="../../share/js/bs/bootstrap-icons.css">
		<link rel="stylesheet" href="../../share/css/main.css">
		<script src="../../share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../share/js/bs/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-4">
					<div class="card my-3">
						<header>基本表单</header>
						<main>
							<form>
								<div class="form-group">
								</div>
							</form>
						</main>
					</div>
				</div>
				<div class="col-4">
					<div class="card my-3">
						<header>表单验证</header>
						<main>
							<form id="form1" novalidate>
								<div class="form-group">
									<label>姓名:</label>
									<input type="text" class="form-control" required />
								</div>
								<button class="btn btn-primary" type="submit">提交</button>
							</form>
						</main>
					</div>
				</div>
				<div class="col-4">
					<div class="card my-3">
						<header>自定义验证</header>
						<main>
							<form class="needs-validation" novalidate>
								<div class="form-row">
									<div class="col-md-6 mb-3">
										<label for="validationCustom01">First name</label>
										<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
										<div class="valid-feedback">
											Looks good!
										</div>
									</div>
									<div class="col-md-6 mb-3">
										<label for="validationCustom02">Last name</label>
										<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
										<div class="valid-feedback">
											Looks good!
										</div>
									</div>
								</div>
								<div class="form-row">
									<div class="col-md-6 mb-3">
										<label for="validationCustom03">City</label>
										<input type="text" class="form-control" id="validationCustom03" required>
										<div class="invalid-feedback">
											Please provide a valid city.
										</div>
									</div>
									<div class="col-md-3 mb-3">
										<label for="validationCustom04">State</label>
										<select class="custom-select" id="validationCustom04" required>
											<option selected disabled value="">Choose...</option>
											<option>...</option>
										</select>
										<div class="invalid-feedback">
											Please select a valid state.
										</div>
									</div>
									<div class="col-md-3 mb-3">
										<label for="validationCustom05">Zip</label>
										<input type="text" class="form-control" id="validationCustom05" required>
										<div class="invalid-feedback">
											Please provide a valid zip.
										</div>
									</div>
								</div>
								<div class="form-group">
									<div class="form-check">
										<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
										<label class="form-check-label" for="invalidCheck">
											Agree to terms and conditions
										</label>
										<div class="invalid-feedback">
											You must agree before submitting.
										</div>
									</div>
								</div>
								<button class="btn btn-primary" type="submit">Submit form</button>
							</form>
						</main>
					</div>
				</div>
			</div>
		</div>
		<script>
			function initForm1() {
				$("#form1").submit(function(event) {
					this.checkValidity();
					event.preventDefault();
					event.stopPropagation();
					this.classList.add('was-validated');
				});
			}
			initForm1();
			
			// Example starter JavaScript for disabling form submissions if there are invalid fields
			(function() {
			  'use strict';
			  window.addEventListener('load', function() {
			    // Fetch all the forms we want to apply custom Bootstrap validation styles to
			    var forms = document.getElementsByClassName('needs-validation');
			    // Loop over them and prevent submission
			    var validation = Array.prototype.filter.call(forms, function(form) {
			      form.addEventListener('submit', function(event) {
			        if (form.checkValidity() === false) {
			          event.preventDefault();
			          event.stopPropagation();
			        }
			        form.classList.add('was-validated');
			      }, false);
			    });
			  }, false);
			})();
		</script>
	</body>
</html>
